var layer = layui.layer;
// 1. 添加类别 - 
// 添加弹窗 - 要用在弹窗中的字符串, 所以没写在标签里
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

$('.add').on('click', e => {
  let index = layer.open({  //每一个弹出层都会返回索引
    type: 1,
    content: add_str,
    area: ['500px', '300px'],
    success() {
      //2、因为add-form是在弹出层上，所以必须等弹出层出现，才能绑定submit事件
      $('.add-form').on('submit', e => {
        e.preventDefault();
        let argStr = $('.add-form').serialize();
        fenleiAPI(argStr, res => {
          layer.close(index);
        })
        console.log(index);
        load();
      })
    }
  });
})
//获取现有分类 - 铺设页面
function load() {
  cateListAPI({}, res => {
    //提取数据
    let arr = res.data.data;
    $('.layui-table tbody').empty();
    arr.forEach(obj => {
      var theTr = `<tr>
            <td>${obj.name}</td>
            <td>${obj.alias}</td>
            <td>
              <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
    
              <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
            </td>
          </tr>`
      $('.layui-table tbody').append(theTr);
    })
  })
}
load();
//由于之前动态创建，所以事件委托删除按钮 - 点击事件
$('.layui-table tbody').on('click', '.delete', function () {
  delCateAPI($(this).attr('myid'), res => {
    $(this).parents('tr').remove();
  })
})



// 3. 编辑分类
// 也要用在弹窗上面
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;
$('.layui-table tbody').on('click', '.edit', function () {
  var Id = $(this).attr('myid')
  var name = $(this).attr('data-name')
  var alias = $(this).attr('data-alias')
  //把弹出层赋值给index
  let index = layer.open({
    title: '新增类别',
    type: 1,
    content: edit_str,
    area: ['500px', '300px'],
    success() {
      //只要弹出层出现（form表单出现），编辑按钮对应10步数据，数据薄弱在输入框里
      //（1）：layui.for管理整个项目所有form标签，所以要用lay-filter的值来区分
      let form = layui.form;
      form.val('edit', { //传入对象，key和上面的变量名重名了
        Id,
        name,
        alias
      })
      //用户改完后 - 点击提交按钮
      $('.add-form').on('submit', e => {
        e.preventDefault();
        //自己来收集修改后的数据，传给后台
        let argStr = $('.add-form').serialize();
        updatecateAPI(argStr, res => {
          layer.close(index);
          load();
        })
      })
    }

  });
})

// var form = layui.form;
// // 事件委托 - 编辑按钮 - 点击事件
// $(".layui-table tbody").on("click", ".edit", e => {
//   // 点击后，获取id值；
//   var id = $(e.target).attr("myid");
//   // 获取分类名字 - 分类别名
//   var name = $(e.target).data("name");
//   var alias = $(e.target).data("alias");
//   // 展示弹出模态窗
//   layer.open({
//     type: 1,
//     title: '编辑类别',
//     content: edit_str,
//     area: ['500px', '250px'],
//     // 层创建完毕时,里面有显示获取到数据
//     success: function (layero, index) {
//       // 快速的铺设form标签下的各种表单标签
//       // 标签的name值 和 对象里的key匹配, 相当就把对象的值赋予给这个标签的value
//       form.val("edit", {
//         Id: id,
//         name,
//         alias
//       });

//       // 注册提交事件
//       $("#edit_form").on("submit", function (e) {
//         e.preventDefault();

//         var data = $(this).serialize();
//         changeCategoryAPI(data, () => {
//           // 重新请求当前页面数据 - 完成铺设
//           load();
//           // 关闭弹出层
//           layer.close(index);
//         });
//       })
//     }
//   });
// });


// // 4. 删除分类
// $(".layui-table tbody").on("click", ".delete", function (e) {
//   // 获取id；初始化的时候，需要把id和删除按钮绑定在一起；
//   var id = $(e.target).attr("myid");

//   // 发送删除请求
//   delCategoryAPI({
//     id
//   }, () => {
//     load(); // 删除成功重新加载一下
//   });
// });